<template>
  <div class="app-container">


    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input v-model="query.title" placeholder="标题"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.status" clearable placeholder="状态">
          <el-option label="已发布" value="Normal"></el-option>
          <el-option label="未发布" value="Draft"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程讲师" >
        <el-select v-model="query.teacherId" clearable placeholder="课程讲师">
          <el-option v-for="teacher in teacherList" :key="teacher.id" :label="teacher.name" :value="teacher.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="课程专业">
        <el-cascader
          :options="subjectList"
          :props="{checkStrictly: true,value: 'id',label: 'label',children: 'children'}"
          v-model="cascaderSubject"
          @change="handleSubjectChange"></el-cascader>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="query.begin"
          type="datetime"
          placeholder="选择开始时间"
          align="right"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="query.end"
          type="datetime"
          placeholder="选择结束时间"
          align="right"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="refreshList(1)">查询</el-button>
        <el-button @click="resetForm">清空</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="records"
      border
      fit
      highlight-current-row
      class="el-table-center"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        :show-overflow-tooltip="true"
        width="100">
      </el-table-column>
      <el-table-column
        prop="subjectId"
        label="课程专业"
        width="100">
        <div slot-scope="scope">
          {{subjectMapper.get(scope.row.subjectId)}}
        </div>
      </el-table-column>
      <el-table-column
        prop="teacherId"
        label="课程讲师"
        width="100">
        <div slot-scope="scope">
          {{teacherMapper.get(scope.row.teacherId)}}
        </div>
      </el-table-column>
      <el-table-column
        prop="lessonNum"
        label="总课时"
        width="70">
      </el-table-column>
      <el-table-column
        prop="viewCount"
        label="浏览数量"
        width="80">
      </el-table-column>
      <el-table-column
        prop="buyCount"
        label="销售数量"
        width="80">
      </el-table-column>
      <el-table-column
        prop="price"
        label="销售价格"
        width="80">
        <div slot-scope="scope">
          {{scope.row.price}} 元
        </div>
      </el-table-column>
      <el-table-column
        prop="status"
        label="课程状态"
        width="100">
        <div slot-scope="scope">
          <el-button v-if="scope.row.status=='Draft'" @click="updateCourseStatus(scope.row.id,'Normal')" size="mini" type="success">上架</el-button>
          <el-button v-if="scope.row.status=='Normal'" @click="updateCourseStatus(scope.row.id,'Draft')" size="mini" type="danger">下架</el-button>
        </div>
      </el-table-column>
      <el-table-column
        prop="gmtCreate"
        label="添加时间"
        width="160">
      </el-table-column>

      <el-table-column
        label="操作"
        width="130">
        <template slot-scope="scope">
          <router-link :to="'/course/edit/' + scope.row.id">
            <el-button type="text" size="small">编辑</el-button>
          </router-link>

          <el-button @click="delCourseById(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="current"
      :page-size="size"
      :total="total"
      style="padding: 30px 0;text-align: center"
      layout="total,prev, pager, next,jumper"
      @current-change="refreshList">
    </el-pagination>
  </div>
</template>

<script>
    import http from "@/api/course"
    import teacherHttp from "@/api/teacher"
    import subjectHttp from "@/api/subject"

    export default {
        name: "list",
        data() {
            return {
                current: 0,
                size: 10,
                query: {
                    teacherId: '',
                    subjectId: '',
                    title: '',
                    begin: '',
                    end: ''
                },
                pages: 1,
                records: [],
                total: 0,
                teacherMapper: new Map(),
                subjectMapper: new Map(),
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                teacherList: [],
                subjectList: [],
                cascaderSubject:''
            }
        },
        methods: {
            refreshList(page) {
                http.getCourseList(page, this.size, this.query).then(res => {
                        this.current = res.data.current
                        this.pages = res.data.pages
                        this.records = res.data.records
                        this.total = res.data.total
                    }
                )
            },
            refreshTeacherMapper() {
                teacherHttp.getNameAndIdMapper().then(res => {
                    this.teacherMapper = new Map(Object.entries(res.data))
                })
            },
            refreshSubjectMapper() {
                subjectHttp.getTitleAndIdMapper().then(res => {
                    this.subjectMapper = new Map(Object.entries(res.data))
                })
            },
            resetForm() {
                this.query = {}
                this.refreshList(1)
                this.cascaderSubject = ''
            },
            getListTeacher() {
                teacherHttp.getTeacherList(0, 1000, null).then(res => {
                    this.teacherList = res.data.records
                })
            },
            getSubjectList() {
                subjectHttp.getSubjectList().then(res => {
                    this.subjectList = res.data;
                });
            },
            handleSubjectChange(val) {
                this.query.subjectId = val[val.length - 1]
            },
            delCourseById(id){
                this.$confirm('删除该课程, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    http.delCourse(id).then(res=>{
                        if (res.data){
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            })
                            this.refreshList(this.current)
                        }
                    })
                }).catch(()=>{});
            },
            updateCourseStatus(courseId,status){
                http.updateCourseStatus(courseId,status).then(res=>{
                    if (res.data){
                        this.$message({
                            type: "success",
                            message: "成功!"
                        })
                        this.refreshList(this.current)
                    }
                })
            },
        },
        created() {
            this.refreshList(1)
            this.refreshTeacherMapper()
            this.refreshSubjectMapper()
            this.getListTeacher()
            this.getSubjectList()
        }
    }
</script>

<style>
  .el-table-center .cell {
    text-align: center;
  }
</style>
